<style lang="scss">
@import "./index.scss";
@import "./lesson.scss";

$cls: '.z-page-lesson-form';
#{$cls} {
  image-rendering: pixelated;
  background-color: #f3f8ff;

  .el-tag.el-tag--danger {
    background-color: #f03e3e;
    color: #fff;
    border-color: transparent;
    height: 20px;
    line-height: 20px;
  }

  &__preview {
    height: 28px;
    padding: 6px 15px;
    margin-top: 10px;
    background-color: #f3f6ff;
    &:hover {
      background-color: #f3f6ff;
    }
  }

  &__publish {
    height: 28px;
    padding: 6px 15px;
    @include mix-button() {
      background-color: #517eff;
      color: #fff;
    }
  }

  &__img {
    width: 156px;
    background: #2B62FF;
    border-radius: 4px;
  }
  &__main {
    background: #FFFFFF;
    box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);
    border-radius: 4px;
  }
}

.z-page-lesson-form__popper {
  padding: 5px;
  font-size: 12px;
  line-height: 20px;
}


.z-page-lesson-form__body {
  padding: 10px;
  box-sizing: border-box;
}

.z-page-lesson-form__info {
  background: #FFFFFF;
  box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);
  border-radius: 4px;
  padding: 10px 16px;
  margin-bottom: 15px;
  &-detail {
    margin-left: 10px;
  }
  &-name {
    font-size: 18px;
    font-weight: normal;
    color: #242424;
    margin-bottom: 5px;
  }
  &-desc {
    font-size: 14px;
    font-weight: normal;
    color: #383838;
  }
  &-person {
    font-size: 14px;
    font-weight: normal;
    color: #747474;
  }
  &-time {
    font-size: 14px;
    font-weight: normal;
    color: #747474;
  }
}

.z-page-lesson-form__form {
  margin-top: 35px;
  .dym-form .el-form:not(.el-form--label-top) .el-form-item {
    align-items: flex-start;
  }
  .cus-input-tag {
    align-items: flex-end;
  }
  .cus-input-tag__suffix {
    font-size: 14px;
    font-weight: normal;
    color: #949494;
    width: max-content;
    white-space: nowrap;
    margin-left: 5px;
  }

}
</style>

<template>
  <div class="z-page-lesson-common z-page-lesson-form">
    <zw-row
        class="z-page-lesson-form__body"
        style="grid-template-columns: 230px 1fr"
        :id="item_id"
        gutter="12px">
      <div class="z-page-lesson-common__card">
        <z-tree class="z-case-tree" :data="treeData"
        ></z-tree>
      </div>
      <zw-layout column>
        <div class="z-page-lesson-form__info">
          <zw-row tpl-column="1fr max-content 15px">
            <zw-layout row style="align-items: stretch">
              <zw-div class="z-page-lesson-form__img" aspect="156:90">
                <div></div>
              </zw-div>
              <zw-layout column class="z-page-lesson-form__info-detail">
                <div style="flex: 1">
                  <div class="z-page-lesson-form__info-name">中越综合执法系统产品知识培训 <el-tag type="danger">已关闭</el-tag></div>
                  <div class="z-page-lesson-form__info-desc">描述：培训基本信息描述</div>
                </div>
                <z-space>
                  <div class="z-page-lesson-form__info-person">讲师：中越管理员</div>
                  <div  class="z-page-lesson-form__info-time">创建时间：2022-5-31 09:00:00</div>
                </z-space>
              </zw-layout>
            </zw-layout>
            <div>
              <z-space vertical>
                <el-button class="z-page-lesson-form__preview">预览课程</el-button>
                <el-button class="z-page-lesson-form__publish" @click="publish_lesson">发布课程</el-button>
              </z-space>
            </div>
            <div>&nbsp;</div>
          </zw-row>
        </div>
        <div class="z-page-lesson-form__main">
          <fox-detail-panel>
            <template #title>基本信息</template>
            <div>
              <z-form-template
                  :label-inline="true"
                  class="z-page-lesson-form__form"
                  ref="form"
                  :def="formDef"
              ></z-form-template>
            </div>
          </fox-detail-panel>
        </div>
      </zw-layout>
    </zw-row>
  </div>
</template>

<script>
import {ZPageMixin} from "@/zpkgs/components/z-pages/ZPageMixin";
import FoxDetailPanel from "@/zpkgs/components/z-pages/FoxDetailPanel";
import {batchlayoutGridFormProperties} from "../../../../babel-static/helpers";

export default {
  name: 'ZPageLessonForm',
  components: {FoxDetailPanel},
  mixins: [
    ZPageMixin
  ],
  data() {
    return {
      inited: false,
      obj: {},
      item_id: ZY.rid(),
      formDef: {
        ui: {
          attrs: [
          ],
        },
        properties: batchlayoutGridFormProperties(
      {
            p33: {
              type: 'string',
              ui: {
                widget: 'CusTextarea',
                label: '课程简介',
                widgetConfig: {
                  rows: 6,
                  maxlength: 100,
                  showWordLimit: true
                },
                slots: {
                  beforeend: `<div style="text-align: center; line-height: 30px;">功能区域</div>`
                }
              },
              rules: [
                {
                  required: true,
                  message: '必填'
                }
              ],
            },
            p22: {
              type: 'string',
              ui: {
                widget: 'CusInputTag',
                label: '课程目标',
                widgetConfig: {},
              },
              rules: [],
            },
            p3: {
              type: 'string',
              ui: {
                widget: 'CusInputTag',
                label: '适用人群',
                widgetConfig: {},
              },
              rules: [],
            },
            p1: {
              type: 'string',
              ui: {
                widget: 'CusInput',
                label: '标题',
                widgetConfig: {
                },
              },
              rules: [
                {
                  required: true,
                  message: '必填'
                }
              ],
            },
            p2: {
              type: 'string',
              ui: {
                widget: 'CusSelect',
                label: '分类',
                widgetConfig: {},
              },
              rules: [],
            },
            p231: {
              type: 'string',
              ui: {
                widget: 'CusInput',
                label: '副标题',
                widgetConfig: {
                },
              },
              rules: [
                {
                  required: true,
                  message: '必填'
                }
              ],
            },
            p232: {
              type: 'string',
              ui: {
                widget: 'CusTextarea',
                label: '描述',
                widgetConfig: {
                  rows: 6,
                  maxlength: 100,
                  showWordLimit: true
                },
              },
              rules: [
              ],
            },
            p21: {
              type: 'string',
              ui: {
                widget: 'CusInputTag',
                label: '标签',
                suffix: '用于按标签搜索课程，相关课程的提取等，由网校管理员后台统一管理。',
                widgetConfig: {},
              },
              rules: [
                {
                  required: true,
                  message: '必填'
                }
              ],
            },
          },
            [
              {
                method: "zwRow",
                args: [
                  {
                    from: 'p1',
                    to: 'p2',
                    config: [
                      ['tpl-column', '1fr 350px']
                    ]
                  }
                ]
              }
            ]
        ),
      },
      treeData: [
        {
          label: '一级 1',
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
            },
            {
              label: '二级 2-2',
            }
          ]
        },
      ]
    }
  },
  methods: {
    publish_lesson() {
      console.log(this.$refs.form.getCurForm().getDataSyncV2())
    }
  },
  mounted() {
    setTimeout(() => {
      this.obj = {
        request: window.Req,
      }
      this.inited = true
    }, 30)
  }
}
</script>
